<template>
  <div class="pt20">
    <div class="student-guide">
      <div class="RCM-help-question">
      <template v-for="item of lists" >
        <div class="RCM-question-items clearfix" :key="item.question">
          <div class="items-title">
            <img src="/static/images/icon40.png"  alt="">
          </div>
          <div class="items-content">
            <h3 @click="showMoreQuestion(item)">{{item.question}}</h3>
            <div class="items-text" v-html="item.answer">
            </div>
          </div>
        </div>
      </template>
    

    </div>
    </div>
  </div>
</template>

<script>
import lists from '@/utils/question_data.js'
export default {
  data(){
    return {
      lists
    }
  },
   filters: {
      filterText( val, isC ) {
        if ( !isC ) {
          return val.substr( 0, 108 ) + '...';
        } else {
          return val;
        }
      }
    },
  methods:{
    showMoreQuestion( item ) {
        item.isExpand = !item.isExpand;
      },
  }
}
</script>

<style scoped>
 .RCM-help-question {
    width: 80%;
    margin: 0 auto;
    padding-bottom: 40px;
 }
  .RCM-question-items {
    display: flex;
    margin-top: 30px;
    justify-content: flex-start;
  }
  .items-title {
    margin-right: 25px;
    width: 30px;
    float: left;
  }

  h3 {
    cursor: pointer;
  }

  .items-text {
    margin-top: 15px;
    color: #5e5e5e;
    line-height: 25px;
  }
</style>
